<template>
  <!-- 产品概要 -->
  <div class="productSummary">
    <div class="remarks">
      带
      <span style="color:red;">*</span>为必填内容
    </div>
    <div class="add_three-dimensional">
      <div class="title">插入三维模型</div>
      <div class="upload">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </div>
      <div
        @click="dialogTableVisible = true"
        class="format"
        style="cursor: pointer;margin-left:0.74rem;font-size:0.16rem;width: 1rem;color:#fff;text-align:center;height: 0.4rem;line-height: 0.4rem;background: rgba(0, 76, 179, 1);border-radius: 0.05rem;"
      >可承载格式</div>
    </div>
    <div class="img_and_description">
      <div class="title">配/部件图及文字描述</div>
      <div class="list">
        <div class="addProduct">
          <div class="btn">
            <button>新增产品</button>
          </div>
        </div>
        <div class="titleList">
          <div v-for="(item,index) in titleList" :key="index">{{item.text}}</div>
        </div>
        <div class="itemBox" v-for="(item,index) in 3" :key="index">
          <div style="line-height: 2.4rem;flex:20%;">{{index+1}}</div>
          <div class="check">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <!-- <i class="el-icon-plus"></i> -->
              <i>插入图片，推荐宽高 1：1，图片小于1M</i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
          <div class="operation">
            <el-input
              type="textarea"
              placeholder="插入说明，不超过100字"
              show-word-limit
              maxlength="100"
              :rows="7"
              v-model="textarea"
            ></el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="btns">
      <button>保存</button>
      <button>提交</button>
      <button>预览</button>
    </div>
    <!-- 遮罩层内容 -->
    <el-dialog :visible.sync="dialogTableVisible" width="60%">
      <div class="img_openBox">
        <img src="@/assets/image/产品概要.png" alt="">
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      textarea: "",
      imageUrl: "",
      dialogImageUrl: "",
      dialogVisible: false,
      titleList: [{ text: "序号" }, { text: "图片" }, { text: "文字" }],
    };
  },
  created() {},
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang='less' scoped>
.productSummary {
  font-size: 0.16rem;
  width: 16.4rem;
  padding-top: 0.4rem;
  padding-left: 0.6rem;
  padding-bottom: 0.6rem;
  .add_three-dimensional {
    display: flex;
    font-size: 0.18rem;
    .title {
      width: 1.9rem;
      color: #004cb3;
    }
    /deep/ .el-upload--picture-card {
      width: 4rem;
      height: 3rem;
      border: 0.01rem solid rgba(204, 204, 204, 1);
      line-height: 3rem;
      vertical-align: top;
    }
  }
  .img_and_description {
    margin-top: 1.9rem;
    display: flex;
    font-size: 0.18rem;
    .title {
      width: 1.9rem;
      color: #004cb3;
    }
    .list {
      margin-top: 0.66rem;
      .addProduct {
        // border: 1px solid red;
        height: 0.4rem;
        margin-bottom: 0.15rem;
        .btn {
          position: relative;
          button {
            outline: none;
            border: none;
            font-size: 0.16rem;
            font-weight: bold;
            color: #fff;
            width: 1rem;
            height: 0.4rem;
            background: rgba(0, 76, 179, 1);
            border-radius: 0.05rem;
            position: absolute;
            right: 0;
          }
        }
      }
      .titleList {
        width: 7rem;
        height: 0.4rem;
        line-height: 0.4rem;
        background: rgba(250, 250, 250, 1);
        border: 0.01rem solid rgba(204, 204, 204, 1);
        display: flex;
        div {
          flex: 40%;
          text-align: center;
        }
        div:nth-child(1) {
          flex: 20%;
        }
      }
      .itemBox {
        display: flex;
        padding: 0.2rem 0;
        border-bottom: 1px solid #eeeeee;
        height: 2.4rem;
        div {
          flex: 20%;
          text-align: center;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .check {
          flex: 40%;
          margin: auto;
        }
        .operation {
          flex: 40%;
          margin: auto;
        }
        /deep/ .el-upload--picture-card {
          width: 2rem;
          height: 2rem;
          border: 1px solid #c0ccda;
          i {
            display: inline-block;
            white-space: wrap;
            width: 2rem;
            font-size: 0.16rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 2rem;
          }
        }
      }
    }
  }
  .btns {
    margin-top: 0.75rem;
    button {
      width: 0.8rem;
      height: 0.4rem;
      border-radius: 0.05rem;
      border: none;
      outline: none;
      color: #fff;
      font-weight: bold;
      font-size: 0.16rem;
    }
    button:nth-child(1) {
      margin-left: 5rem;
      background-color: #e29000;
    }
    button:nth-child(2) {
      background-color: #e20000;
      margin: 0 0.7rem;
    }
    button:nth-child(3) {
      background-color: #004cb3;
    }
  }
  .img_openBox{
    display: inline-block;
    margin-left: 15%;
    width: 8.08rem;
    height: 11.86rem;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>